<template>
  <view class="vaccine-detail-container tn-safe-area-inset-bottom">

    <tn-nav-bar fixed backgroundColor="tn-main-gradient-orangeyellow">
      疫苗详情
    </tn-nav-bar>
   

    <!-- 内容区域 -->
    <view class="content-wrapper" :style="{ paddingTop: vuex_custom_bar_height + 'px' }" style="margin-top: 30rpx;">
      <!-- 疫苗基本信息卡片 -->
      <view class="vaccine-card">
        <view class="vaccine-header">
          <view class="vaccine-title">
            <text class="title-text">{{ vaccineInfo.title }}</text>
            <text class="desc-text">{{ vaccineInfo.desc }}</text>
          </view>
          <view class="vaccine-icon">
            <text class="tn-icon-syringe icon-gradient"></text>
          </view>
        </view>

        <view class="vaccine-info-item">
          <text class="info-label">接种时间</text>
          <text class="info-value">{{ vaccineInfo.time || '暂无' }}</text>
        </view>

        <view class="vaccine-info-item">
          <text class="info-label">接种状态</text>
          <view class="status-tag" :class="{ 'status-done': vaccineInfo.isDone }">
            <text>{{ vaccineInfo.isDone ? '已完成' : '未接种' }}</text>
          </view>
        </view>
      </view>

      <!-- 疫苗详细介绍 -->
      <view class="detail-section">
        <view class="section-title">
          <text class="tn-icon-info-circle"></text>
          <text>疫苗介绍</text>
        </view>
        <view class="section-content">
          <text class="detail-text">{{ vaccineInfo.introduction || '暂无详细介绍' }}</text>
        </view>
      </view>

      <!-- 接种注意事项 -->
      <view class="detail-section">
        <view class="section-title">
          <text class="tn-icon-attention"></text>
          <text>接种注意事项</text>
        </view>
        <view class="section-content">
          <view class="notice-item" v-for="(item, index) in vaccineInfo.notices" :key="index">
            <text class="notice-dot"></text>
            <text class="notice-text">{{ item }}</text>
          </view>
          <text class="detail-text" v-if="!vaccineInfo.notices || vaccineInfo.notices.length === 0">暂无注意事项</text>
        </view>
      </view>

      <!-- 不良反应 -->
      <view class="detail-section">
        <view class="section-title">
          <text class="tn-icon-alert-circle"></text>
          <text>可能的不良反应</text>
        </view>
        <view class="section-content">
          <view class="reaction-item" v-for="(item, index) in vaccineInfo.reactions" :key="index">
            <text class="reaction-dot"></text>
            <text class="reaction-text">{{ item }}</text>
          </view>
          <text class="detail-text" v-if="!vaccineInfo.reactions || vaccineInfo.reactions.length === 0">暂无记录</text>
        </view>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-actions">
      <tn-button backgroundColor="tn-main-gradient-orangeyellow" fontColor="#FFFFFF" @click="goToSetPlan">
        <text class="tn-icon-set"></text>
        <text>设置接种计划</text>
      </tn-button>
    </view>
  </view>
</template>

<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'

export default {
  name: 'VaccineDetail',
  mixins: [template_page_mixin],
  data() {
    return {
      vaccineId: null,
      vaccineInfo: {
        title: '',
        desc: '',
        time: '',
        isDone: false,
        introduction: '',
        notices: [],
        reactions: []
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      this.vaccineId = options.id;
      this.loadVaccineInfo();
    }

    // 如果有传递的数据，直接使用
    if (options.data) {
      try {
        const data = JSON.parse(decodeURIComponent(options.data));
        this.vaccineInfo = {
          ...this.vaccineInfo,
          ...data
        };
      } catch (e) {
        console.error('解析疫苗数据失败', e);
      }
    }
  },
  methods: {
    // 加载疫苗详情信息
    loadVaccineInfo() {
      const vaccineDetails = require('@/static/vaccine.json');
      const vaccineMapping = new Map([
        [1, 1], [13, 1], [11, 1],
        [3, 3], [5, 3],
        [2, 18], [6, 18], [8, 18], [18, 18],
        [14, 14], [19, 14],
        [16, 16], [24, 16],
        [20, 20], [22, 20],
        [21, 7], [7, 7]
      ]);
   
      this.vaccineId = vaccineMapping.get(Number(this.vaccineId)) ?? this.vaccineId;
      if (vaccineDetails[this.vaccineId]) {
        this.vaccineInfo = {
          ...this.vaccineInfo,
          ...vaccineDetails[this.vaccineId]
        };
      }
    },

    // 返回上一页
    goBack() {
      uni.navigateBack();
    },

    // 跳转到设置接种计划
    goToSetPlan() {
      // 这里可以直接调用父页面的setPlan方法或者返回上一页后再打开设置弹窗
      uni.navigateBack({
        success: () => {
          // 可以通过事件总线或其他方式通知父页面打开设置弹窗
          uni.$emit('openVaccinePlanSetting', this.vaccineId);
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.vaccine-detail-container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 120rpx;
}

.custom-nav-title {
  color: #FFFFFF;
  font-size: 32rpx;
}

.content-wrapper {
  padding: 120rpx 30rpx 30rpx;
}

.vaccine-card {
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

  .vaccine-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;

    .vaccine-title {
      .title-text {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
        margin-right: 10rpx;
      }

      .desc-text {
        font-size: 28rpx;
        color: #666;
      }
    }

    .vaccine-icon {
      .icon-gradient {
        font-size: 60rpx;
        background: linear-gradient(45deg, #FF9700, #ED1C24);
        -webkit-background-clip: text;
        color: transparent;
      }
    }
  }

  .vaccine-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    padding-bottom: 20rpx;
    border-bottom: 1px solid #f5f5f5;

    &:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }

    .info-label {
      font-size: 28rpx;
      color: #666;
    }

    .info-value {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
    }

    .status-tag {
      padding: 6rpx 20rpx;
      background-color: #f0f0f0;
      border-radius: 30rpx;
      font-size: 24rpx;
      color: #999;

      &.status-done {
        background-color: rgba(0, 170, 120, 0.1);
        color: #00aa78;
      }
    }
  }
}

.detail-section {
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

  .section-title {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    font-size: 30rpx;
    font-weight: bold;
    color: #333;

    .tn-icon-info-circle,
    .tn-icon-attention,
    .tn-icon-alert-circle {
      margin-right: 10rpx;
      font-size: 32rpx;
      color: #FF9700;
    }
  }

  .section-content {
    .detail-text {
      font-size: 28rpx;
      color: #666;
      line-height: 1.6;
    }

    .notice-item,
    .reaction-item {
      display: flex;
      margin-bottom: 15rpx;

      .notice-dot,
      .reaction-dot {
        width: 12rpx;
        height: 12rpx;
        border-radius: 50%;
        background-color: #FF9700;
        margin-top: 14rpx;
        margin-right: 15rpx;
        flex-shrink: 0;
      }

      .notice-text,
      .reaction-text {
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
        flex: 1;
      }
    }

    .reaction-item .reaction-dot {
      background-color: #ff6b6b;
    }
  }
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 30rpx;
  background-color: #FFFFFF;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 99;

  .tn-button {
    width: 100%;
    height: 80rpx;
    border-radius: 40rpx;

    .tn-icon-set {
      margin-right: 10rpx;
    }
  }
}
</style>